<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input type="text" id="ipt">
    <script>
        /*
            什么是事件对象？
                就是当你触发了一个事件以后，对该事件的一些描述信息
                比如：
                    你触发一个点击事件的时候，你点在哪个位置了，坐标多少？
                    你触发一个键盘事件的时候，你按下的是哪个键？
                每个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
                浏览器给了我们一个黑盒子，叫做window.event，就是对事件信息的所有描述
                    比如点击事件，你点在了0 0 的位置，那么你就会得到这个事件对象里面对应的就会有这个点位的属性
        */ 

        const box = document.querySelector('.box')
        const ipt = document.querySelector('#ipt')

        // 每一个事件回调在触发的时候，浏览器都会传进来一个事件对象作为参数，里面包含了的东西就不讲了，上面都写出来了。
        box.onclick = (event)=>{
            // 但是高贵的IE低版本有时候不支持event,所以我们还有一个window.event。不过也不用太在意这种兼容性问题，IE已亡
            event = event || window.event
            console.log(event);
        }

        ipt.onkeyup = (event)=>{
            console.log(event.keyCode);
        }
    </script>
</body>
</html>